<script lang="ts" setup>
import { h, ref, reactive, nextTick } from 'vue'
import { useResetReactive } from 'dsrz/hooks/useReset'
import { aesEncrypt, createRef, refs } from 'dsrz/utils'
import AddOrUpdate from './components/addOrUpdate.vue'
import LookOrUpdate from './components/lookOrUpdate.vue'
import teacherOrUpdate from './components/teacherOrUpdate.vue'
import classPosition from './components/classPosition.vue'

import CurrencyDemo from '@/components/demo/index.vue'

import type { ColumnItem, Params, FormDetails } from './types/index'

defineOptions({
  name: 'classPage',
})

const {
  params,
  exposes: { reset },
} = useResetReactive({})

const data = ref([
  {
    gradeName: 'gradeName',
    deptName: 'deptName',
    majorName: 'majorName',
    name: 'name',
    headmasterName: 'headmasterName',
    instructorName: 'instructorName',
    createTime: 'createTime',
    teacherName: 'teacherName',
    enable: true,
  },
  {
    gradeName: 'gradeName-2',
    deptName: 'deptName-2',
    majorName: 'majorName-2',
    name: 'name',
    headmasterName: 'headmasterName',
    instructorName: 'instructorName',
    createTime: 'createTime',
    teacherName: 'teacherName',
    enable: false,
  },
])

const items = ref([
  {
    prop: 'srk',
    is: 'currency-input',
    bind: {
      placeholder: '班级名称',
      clearable: true,
    },
  },
  {
    prop: 'epxlk',
    is: 'el-select-v2',
    bind: {
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
      ],
      placeholder: '年级',
      clearable: true,
    },
  },
  {
    is: 'currency-button',
    bind: {
      color: '#6f6f6f',
      title: '清空',
      icon: 'DsrzClear',
    },
    on: { click: reset },
  },
])

const btns = ref([
  {
    is: 'currency-button',
    bind: {
      color: '#178782',
      title: '导入班级',
      icon: 'DsrzExport',
    },
    on: {
      click: () => {
        // resetForm() // 重置表单
        dialogTitle.value = '导入班级'
        status.value = true
      },
    },
  },
  {
    is: 'currency-button',
    bind: {
      color: '#178782',
      title: '下载导入模版',
      icon: 'DsrzExport',
    },
    on: {
      click: () => {
       console.log('== 下载导入模版')
      },
    },
  },
  {
    is: 'currency-button',
    bind: {
      type: 'primary',
      title: '新增',
      icon: 'DsrzAdd',
    },
    on: {
      click: () => {
        resetForm() // 重置表单并设置默认值
        dialogTitle.value = '新增班级'
        status.value = true
      },
    },
  },
])

const columns = ref([
  { label: '序号', type: 'index', width: '80px', align: 'center' },
  { label: '所属年级', prop: 'gradeName', isDecrypt: true },
  { label: '所属二级学院', prop: 'deptName' },
  { label: '所属专业', prop: 'majorName', },
  { label: '班级名称', prop: 'name', },
  { label: '班主任', prop: 'headmasterName', },
  { label: '辅导员', prop: 'instructorName', },
  { label: '创建时间', prop: 'createTime', },
  // { label: '任课老师', prop: 'teacherName', },
  { label: '状态', prop: 'enable', is: 'currency-switch' },
  
  {
    label: '操作',
    is: 'currency-more',
    bind: {
      number: 4,
    },
    fixed: "right",
    list: [
      {
        is: 'currency-button',
        bind: { type: 'primary', link: true, title: '查看' },
        on: {
          click: (e: any, row: any) => {
            console.log('== row ', row)
            status3.value = true
            nextTick(() => {
              refs.classLookDialogRef?.editor({name: '智联2402班', teacherHistory: []})
            })
          },
        },
      },
      {
        is: 'currency-button',
        bind: { type: 'primary', link: true, title: '修改' },
        on: {
          click: (e: any, row: any) => {
            console.log('== row ', row)
            dialogTitle.value = '修改班级'
            status.value = true
          },
        },
      },
      {
        is: 'currency-button',
        bind: { type: 'primary', link: true, title: '教师管理' },
        on: {
          click: (e: any, row: any) => {
            console.log('== 教师 row ', row)
            status2.value = true
            nextTick(() => {
              refs.classFormTeacherOrUpdateRef?.editor(
                {
                  classId: 328, 
                  classTeachers: [{userId: 4}, {userId: 5}], 
                  headmasterTeachers: {userId: 1}, 
                  instructorTeachers: {userId: 2}, 
                  termId: 3, 
                  termName: "2024-2045第二學期"
                })
            })
          },
        },
      },
      {
        is: 'currency-button',
        bind: { type: 'primary', link: true, title: '班级维护' },
        on: {
          click: (e: any, row: any) => {
            console.log('== 班级 row ', row)
            status4.value = true
            nextTick(() => {
              refs.classPositionRef?.editor(
                {
                  ...row, 
                  monitorId: 1, 
                  deputyId: 4, 
                  secretaryId: 5, 
                  psychologicalId: 1, 
                })
            })
          },
        },
      },
    ],
  },
])


const resetForm = () => {
  // 重置表单逻辑，如果需要的话
  console.log('重置表单')
}

const dialogTitle = ref<string>('')

const status = ref<boolean>(false)
const status3 = ref<boolean>(false)
const status2 = ref<boolean>(false)
const status4 = ref<boolean>(false)
const query = (param: FormDetails) => {
  console.log('== query ', param)
}

</script>
<template>
  <div>
    <CurrencyTable
      :data="data"
      :params="params"
      :items="items"
      :btns="btns"
      :columns="columns"
    />
  </div>

  <!-- 新增、修改、导入班级 -->
  <AddOrUpdate
    v-if="status"
    :visible="status"
    :dialogTitle="dialogTitle"
    @close="status = false"
    @confirm="query"
    />
    <!-- :ref="(e: any) => createRef(e, 'classFormAddOrUpdateRef')" -->

   <!-- 查看 -->
  <LookOrUpdate
    v-if="status3"
    :visible="status3"
    :ref="(e: any) => createRef(e, 'classLookDialogRef')"
    @close="status3 = false"
  ></LookOrUpdate>

  <!-- 教师管理 -->
  <teacherOrUpdate
    v-if="status2"
    :visible="status2"
    :ref="(e: any) => createRef(e, 'classFormTeacherOrUpdateRef')"
    @close="status2 = false"
    @confirm="query"
  />

  <!-- 班级职务 -->
  <classPosition
    v-if="status4"
    :visible="status4"
    :ref="(e: any) => createRef(e, 'classPositionRef')"
    @close="status4 = false"
    @confirm="query"
  />
  
</template>
